<template>
  <section>
    <div class="cost-title">
      {{title}}
      <el-tooltip placement="top"
                  effect="light">
        <div slot="content">
          1、(零担费或整车费+提货费+送货费+装卸费)>最低收费,<br />
          合约报价=零担费或整车费+提货费+送货费+装卸费+保险费+税费<br />
          {{tipsA}}<br />
          合约报价=最低收费+保险费+税费<br />
          注:<br />
          保险费=货物总价值*税费<br />
          税费=(零担费+提货费+送货费+装货费+装卸费+保费)*税率<br />
          {{tipsB}}<br />
        </div>
        <icon-svg class-name="iconClass"
                  icon-name="bangzhuzhongxin1" />
      </el-tooltip>
    </div>
    <el-table :data="record"
              max-height="300"
              style="width: 100%">
      <el-table-column type="index"
                       label="序号"
                       width="50">
      </el-table-column>
      <template v-for="(item, index) in recordColumn">
        <el-table-column v-if="item.type === 'templateNo'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <link-detail :value="scope.row.templateNo"
                         :row="scope.row"
                         :url="`newQuotation`"
                         :params-data="paramsData"
                         :link-type="1"
                         :copy-visable="false"
                         v-bind="$attrs" />
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div>{{ scope.row[item.type] || '--' }}</div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="description.length"
         class="detail-info">
      <template v-for="(item, i) in description">
        <div :key="i">{{i+1}}. {{item}}</div>
      </template>
    </div>
  </section>
</template>

<script>
import LinkDetail from "@components/table/column/LinkColumn.vue";
export default {
  name: "TemplateDetail",
  props: {
    title: {
      type: String,
      default: null
    },
    record: {
      type: Array,
      default: []
    },
    description: {
      type: Array,
      default: []
    }
  },
  components: { LinkDetail },
  data () {
    return {
      paramsData: ["templateId"],
      tipsA: `2、(零担费或整车费+提货费+送货费+装卸费)<最低收费,`,
      tipsB: `如果(零担+提货+送货+装货+装卸)<最低收费,则税费=(最低收费+保费)*税率`,
      recordColumn: [
        { label: "匹配时间", type: "matchAt" },
        { label: "匹配方式", type: "modeName" },
        { label: "报价单编号", type: "templateNo" },
        { label: "合约编号", type: "code" },
        { label: "合约名称", type: "name" },
      ],
    }
  }
}
</script>

<style scoped lang="scss">
.cost-title {
  margin: 20px 0 15px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
}
.detail-info {
  margin-top: 20px;
  line-height: 26px;
}
</style>